<div class="pos-receipt" style="width:80mm; margin:0; padding:0; font-family:Lato, sans-serif;">
    <div class="pos-receipt-contact" style="font-weight:bold; color:black; font-size:14px; text-align:center;">
        <div>Shop Name</div>
        <div>Telephone Number: 1234567</div>
        <div>Shop Address, Shop No: 22</div>
        <t t-if="props.receipt.headerData.header">
            <div><t t-out="props.receipt.headerData.header" /></div>
        </t>
        <t t-if="props.receipt.headerData.cashier">
            <div style="margin-top:5px; border-top:2px solid black; padding-top:5px;">
                <div>Served by: <t t-esc="props.receipt.headerData.cashier" /></div>
                <t t-if="props.data.headerData.trackingNumber">
                    <div style="font-size:14px;">Tracking No: <t t-esc="props.data.headerData.trackingNumber" /></div>
                </t>
            </div>
        </t>
    </div>

    <div style="margin-top:10px;">
        <table class="receipt-orderlines" style="font-size:14px; font-weight:bold; color:black; width:100%; border-collapse:collapse;">
            <colgroup>
                <col style="width:50%;" />
                <col style="width:30%;" />
                <col style="width:20%;" />
            </colgroup>
            <thead>
                <tr style="border-bottom:2px solid black;">
                    <th style="text-align:left; padding:5px;">Product</th>
                    <th style="text-align:center; padding:5px;">Qty</th>
                    <th style="text-align:right; padding:5px;">Amount</th>
                </tr>
            </thead>
            <tbody>
                <t t-if="props.orderlines and props.orderlines.length">
                    <tr t-foreach="props.orderlines" t-as="orderline" t-key="orderline_index">
                        <td style="padding:5px; text-align:left;">
                            <t t-esc="orderline.productName" />
                            <t t-if="orderline.discount > 0">
                                <div style="font-size:12px; font-style:italic; color:black;">
                                    <t t-esc="orderline.discount" />% discount
                                </div>
                            </t>
                            <t t-if="orderline.customerNote">
                                <div style="font-size:12px;" t-esc="orderline.customerNote" />
                            </t>
                        </td>
                        <td style="padding:5px; text-align:center;">
                            <t t-esc="orderline.qty" />
                        </td>
                        <td style="padding:5px; text-align:right;">
                            <t t-esc="orderline.unitPrice" />
                        </td>
                    </tr>
                </t>
            </tbody>
        </table>
    </div>

    <!-- Total Section -->
    <div style="margin-top:10px; font-size:14px; border-top:2px solid black; padding-top:5px; border-bottom:2px solid black; text-align:right; font-weight:bold;">
        <span style="float:left;">TOTAL:</span>
        <span t-esc="props.pos.env.utils.formatCurrency(props.data.amount_total)" style="margin-right:5px;"></span>
    </div>

    <div style="margin-top:10px; font-size:14px; text-align:center; font-weight:bold; color:black;">
        Thank You... Please Visit Again ...
    </div>
    <div style="font-size:14px; text-align:center; font-weight:bold; color:black;">
        POS System by Blackpaw Innovations
    </div>
    <div style="font-size:14px; text-align:center; font-weight:bold; color:black;">
        WhatsApp Us: +254 114 911 852
    </div>
</div>